<template>
  <div class="home container">
    <el-card shadow="hover">
      <el-row >
       <h3><strong>从 ProsysOPCUA 模拟服务器 采集传感器数据</strong></h3>
      </el-row>
    </el-card>

    <el-table :data="testData" style="width: 100%" height="550">
      <el-table-column fixed prop="name" label="传感器名称" width="200" />
      <el-table-column fixed prop="label" label="描述" width="200" />
      <el-table-column fixed prop="position" label="传感器位置" width="200" />
      <el-table-column prop="value" label="实时数值" width="200" />
      <el-table-column prop="unit" label="单位" width="100" />
      <el-table-column prop="dtime" label="采集时间" width="200" />
    </el-table>

  </div>
</template>

<script setup lang="ts">

import { reactive } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { timeFix, welcome } from '@/utils/index'
import SvgIcon from '@/components/SvgIcon/src/SvgIcon.vue'
import { getEnvByName } from '@/utils/getEnv'
import logoPng from '@/assets/images/logo.png'
import {getSensorData} from '@/api/opcua'
import {OpcuaData} from '@/api/opcua/types'
import { ColumnProps } from '@/components/ProTable/src/types'
import ProTable from '@/components/ProTable/src/ProTable.vue'

const userStore = useUserStore()
const userInfo = userStore.userInfo
const initParam = reactive({})

// 处理返回的数据格式
const dataCallback = (data: any) => {
  return {
    list: data?.records,
    total: data?.total,
  }
}

let testData = reactive<OpcuaData[]>([])

const columns: ColumnProps[] = [
  {
    prop: 'name',
    label: '传感器名称',
  },
  {
    prop: 'value',
    label: '传感器值',
  },
  {
    prop: 'dtime',
    label: '采集时间'
  },
]

let timer1 = setInterval(()=>{

  // let tableData = getSensorData()
  
  getSensorData().then((tableData)=>{
    console.log('1 @@@@ tableData', tableData.data );

    testData.length = 0
    testData.splice(0, testData.length, ...tableData.data)

    console.log('2 @@@@ testData', testData );
  })
  // testData.unshift(tableData.Data)

}, 3000)


</script>

<style scoped lang="scss">
.home {
  height: 100%;

  .page-header {
    display: flex;
    align-items: center;

    .page-header-tip {
      flex: 1;
      margin-left: 20px;
    }

    .page-header-tip-title {
      margin-bottom: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #3c4a54;
    }

    .page-header-tip-desc {
      min-height: 20px;
      font-size: 14px;
      color: #808695;
    }
  }

  .welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}
</style>
